<!--
 * @Author: your name
 * @Date: 2021-07-01 16:02:55
 * @LastEditTime: 2021-07-03 20:18:08
 * @LastEditors: jiangsx
 * @Description: In User Settings Edit
 * @FilePath: \briup\项目\mobile-app\src\views\mine\certification.vue
-->
<template>
  <div>
    <div>
      <van-nav-bar
        title="实名认证"
        left-text="返回"
        @click-left="$router.back()"
        left-arrow
      />
    </div>
    <div class="tip">
      <div>
        <img width="100" height="100" round src="@/images/anquan.png" alt="" />
      </div>
      <div style="margin-top: 10px; font-weight: 300; color: #000">
        进行实名认证
      </div>
      <div
        style="
          margin-top: 10px;
          color: #999;
          font-size: 12px;
          letter-spacing: 0.1em;
        "
      >
        用于保障账号的安全及快速接收订单信息
      </div>
    </div>
    <div style="margin-top: 20px">
      <van-form validate-first @failed="onFailed" ref="form">
        <van-field
          v-model="onFailed.realname"
          name="真实姓名"
          label="真实姓名"
          placeholder="真实姓名"
          :rules="[
            {
              required: true,
              message: '请填写真实姓名',
            },
          ]"
        />
        <van-field
          v-model="onFailed.idCard"
          label="身份证号"
          name="身份证号"
          placeholder="身份证号"
          :rules="[
            {
              required: true,
              message: '请填写身份证号',
            },
          ]"
        />
        <van-field
          v-model="onFailed.bankCard"
          label="银行卡号"
          name="银行卡号"
          placeholder="银行卡号"
          :rules="[
            {
              required: true,
              message: '请填写银行卡号',
            },
          ]"
        />
        <van-field name="身份证正面照" label="身份证正面照">
          <template #input>
            <van-uploader
              :after-read="upDateFile1"
              v-model="idcardPhotoPositive"
              :max-count="1"
            />
          </template>
        </van-field>
        <van-field name="身份证反面照" label="身份证反面照">
          <template #input>
            <van-uploader
              :after-read="upDateFile2"
              v-model="idcardPhotoNegative"
              :max-count="1"
            />
          </template>
        </van-field>
        <van-field name="银行卡照片" label="银行卡照片">
          <template #input>
            <van-uploader
              :after-read="upDateFile3"
              v-model="bankCardPhoto"
              :max-count="1"
            />
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button round block type="info" @click="submitData"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { getInfo } from "@/api/user";
import { submitCertificationApply } from "@/api/certification";
import axios from "axios";
import Toast from "vant";
export default {
  data() {
    return {
      onFailed: [],
      userId: "",
      token: "",
      idcardPhotoPositive: [],
      idcardPhotoNegative: [],
      bankCardPhoto: [],
    };
  },
  computed: {},
  methods: {
    async upDateFile1(file) {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        overlay: true,
      });
      console.log(file); //file文件如下图
      var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
      formData.append("file", file.file); //接口需要传的参数
      let res = await axios({
        method: "post",
        url: "http://121.199.29.84:8888/file/upload",
        data: formData,
      });
      Toast.clear();
      return "http://121.199.29.84:8888/group1/" + res.data.id;
    },
    async upDateFile2(file) {
      console.log(file); //file文件如下图
      var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
      formData.append("file", file.file); //接口需要传的参数
      let res = await axios({
        method: "post",
        url: "http://121.199.29.84:8888/file/upload",
        data: formData,
      });
      return "http://121.199.29.84:8888/group1/" + res.data.id;
    },
    async upDateFile3(file) {
      console.log(file); //file文件如下图
      var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
      formData.append("file", file.file); //接口需要传的参数
      let res = await axios({
        method: "post",
        url: "http://121.199.29.84:8888/file/upload",
        data: formData,
      });
      return "http://121.199.29.84:8888/group1/" + res.data.id;
    },
    async findUserData() {
      const res = await getInfo(this.token);
      this.userId = res.data.id;
    },
    submitData() {
      this.$refs.form
        .validate()
        .then(async () => {
          let temp = {
            ...this.onFailed,
            ...this.userId,
            idcardPhotoPositive: this.idcardPhotoPositive[0],
            idcardPhotoNegative: this.idcardPhotoNegative[0],
            bankCardPhoto: this.bankCardPhoto[0],
          };
          const res = await submitCertificationApply({ temp });
          this.$toast.success("提交成功");
          this.$router.push({
            path: "/mine",
          });
        })
        .catch(() => {
          this.$toast.fail("提交失败");
        });
    },
  },
  created() {
    this.token = getToken();
    this.findUserData();
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.van-nav-bar {
  background-color: #ccffcc;
  height: 50px;
  line-height: 25px;
  .van-nav-bar__content {
    height: 50px;
  }
}
.tip {
  height: 170px;
  width: 100%;
  margin-top: 15px;
  text-align: center;
}
</style>